<template>
  <div class="box">
    <Header/>
    <div class="content">
      <div class="container">
        <div class="box2">
          <!-- 待转译C源码库地址框 -->
          <div class="link-box">
            <div class="list-title">待转译C源码库地址</div>
            <span>{{ TaskClaimedCUrl }}</span>
            <!--            <a href="https://example.com" target="_blank" class="link">https://example.com</a>-->
          </div>
        </div>

        <!-- 任务列表框 -->
        <div class="box2">
          <div class="list-title">认领人列表:</div>
          <ul class="task-list">
            <li v-for="task in TaskClaimedList" :key="task.id" class="task-item">
              <div class="task-info">
                <span class="claimUserId">用户: {{ task.claimUserName }}</span>
                <span class="reward">rust地址: {{ task.rustUrl }}</span>
                <span class="progress">
                  {{ task.progress === "1" ? '完成' : '未完成' }}
                </span>
                <el-button v-if="task.claimUserId==obbj.id|| userId ==obbj.id && task.progress===2" type="primary"
                           size="large"
                           @click="complete(task.id)" class="wcbtn">
                  完成
                </el-button>

              </div>
            </li>
          </ul>
          <div class="btn">
            <el-button type="primary" size="large" @click="goToClaimTask()" class="claim-btn">
              认领任务
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';
import {TaskApi} from '../../api/task.ts';
import {TaskClaimed} from "../../types/entity.ts";
import router from "../../router";
import Header from "../components/header.vue";
import {ElMessage} from "element-plus";

// 路由和任务数据
const route = useRoute();
const TaskClaimedList = ref<TaskClaimed[]>([]);
const TaskClaimedCUrl = ref();
const taskId = ref();
const userId = ref();
const obbj = ref();

// 获取任务详情
const fetchTaskDetail = async (id: number) => {
  try {
    const response = await TaskApi.claimList(id);
    console.log("领取任务列表", response);
    TaskClaimedList.value = response.data;
  } catch (error) {
    console.error('获取任务详情失败:', error);
  }
};
const complete = async (id: number) => {
  try {
    const response = await TaskApi.completedTask(id);
    if (response.meta.code == 2000) {
      ElMessage.success('完成')
      await fetchTaskDetail(taskId.value);
    } else {
      ElMessage.error('失败')
    }
  } catch (error) {
    // console.error('获取任务详情失败:', error);
  }
};

// 任务跳转
const goToClaimTask = () => {
  router.push({name: 'ClaimTask', query: {cUrl: TaskClaimedCUrl.value, taskId: taskId.value}});
};

// 获取路由参数中的任务 ID
onMounted(() => {
  taskId.value = router.currentRoute.value.query.id;
  userId.value = router.currentRoute.value.query.userId;
  TaskClaimedCUrl.value = router.currentRoute.value.query.cUrl;
  fetchTaskDetail(taskId.value);


  let userInfo = sessionStorage.getItem('userInfo')
  if (userInfo) {
    obbj.value = JSON.parse(userInfo)
    console.log(obbj.value)
  }
  console.log("用户信息", obbj, userId)
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;

  .content {
    width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    .container {
      display: flex;
      justify-content: space-between; /* 让两个框并排显示 */
      gap: 20px;
      flex-wrap: wrap; /* 自适应布局，适应不同屏幕 */
    }

    /* 各个框的样式 */

    .box2 {
      margin-left: 25%;
      width: 48%; /* 每个框的宽度 */
      min-width: 500px; /* 最小宽度 */
      padding: 20px;
      border: 1px solid #e1e4e8;
      border-radius: 6px;
      background-color: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    /* 待转译C源码库地址部分 */

    .link-box {
      margin-bottom: 20px;
    }

    .link {
      color: #0366d6;
      text-decoration: none;
      font-size: 16px;
    }

    .link:hover {
      text-decoration: underline;
    }

    .list-title {
      font-size: 20px;
      font-weight: bold;
      color: #24292f;
      margin-bottom: 15px;
    }

    /* 任务列表 */

    .task-list {
      list-style-type: none;
      padding: 0;
    }

    .task-item {
      background-color: #f6f8fa;
      padding: 15px;
      border-radius: 6px;
      margin-bottom: 15px;
      transition: background-color 0.3s ease, transform 0.2s;
    }

    .task-item:hover {
      background-color: #e1e8f0;
      transform: scale(1.02);
    }

    .task-info {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #586069;
    }

    .claimUserId {
      font-weight: bold;
    }

    .reward {
      color: #2cbe4e;
    }

    .progress {
      color: #d73a49;
    }

    /* 按钮 */

    .btn {
      margin-top: 20px;
      text-align: center;
    }

    .claim-btn {
      width: 100%;
      padding: 12px;
      background-color: #2cbe4e;
      border-color: #2cbe4e;
      border-radius: 6px;
      color: #ffffff;
      transition: background-color 0.3s, border-color 0.3s;
    }

    .claim-btn:hover {
      background-color: #218c3f;
      border-color: #218c3f;
    }
  }
}
</style>
